<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="css/order_list.css" rel="stylesheet" type="text/css">

    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/d3.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/jquery.qrcode-0.11.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

</head>
<body>
<div id="myalipay"></div>
<ul id="shops-nav" class="nav nav-justified">
    <!--<li class="active">-->
        <!--<a href="#w3c" data-toggle="tab">http://r.ele.me/jlybhd</a>-->
    <!--</li>-->
    <!--<li>-->
        <!--<a href="#ios" data-toggle="tab">http://r.ele.me/jlybhd</a>-->
    <!--</li>-->
</ul>
<div id="shops-capacity" class="tab-content">
    <!--<div id="w3c" class="shop-div tab-pane fade in active">-->
        <!--111-->
    <!--</div>-->
    <!--<div id="ios" class="shop-div tab-pane fade">-->
        <!--ios-->
    <!--</div>-->
</div>


<script>

    (function() {
        $.get(server_host + '/api/py/today_shop_urls').success(function(strData){
            var data = JSON.parse(strData)
            var shops_ul = d3.select('#shops-nav')
            var shop_li = shops_ul.selectAll('li.shop')
                    .data(data)
                    .enter()
                    .append('li')
                    .attr('class', 'shop')
            shop_li.append('a')
                    .attr('data-toggle', 'tab')
                    .attr('href', function(d){return '#shopdiv-' + parse_url(d['url']).pathname.slice(1);})
                    .text(function(d){return d['shop_name']})
            var shops_capacity = d3.select('#shops-capacity')
            var shop_div = shops_capacity.selectAll('div.shop-div')
                    .data(data)
                    .enter()
                    .append('div')
                    .attr('class', 'shop-div tab-pane fade')
                    .attr('id', function(d){return 'shopdiv-' + parse_url(d['url']).pathname.slice(1);})
                    .attr('least_deliver', function(d){return d['least_deliver'];})
                    .attr('shop_url', function(d){return d['url'];})

            create_shop_div(shop_div)
            var focus_id = location.hash
            if (focus_id){
                $(focus_id).addClass('active in')
            }


        })
        $('#myalipay').qrcode({
            "width": 100,
            "height": 100,
            "color": "#3a3",
            "text": alipay_url,
            "ecLevel": "H",
            "radius": 0.5,
            //
            "label": qrcode_tips,
            "mode": 2,
            "mSize": 0.11,
            "mPosX": 0.5,
            "mPosY": 0.5,
            "fontname": "Ubuntu",
            "fontcolor": "#ff9818"

        });
    }());

</script>
</body>
</html>